<template>
	<div style="width: 100%">
		<div class="menu">
			<li><el-link href="/#/chain" :underline="false">现状分析图</el-link></li>
			<li><el-link href="/#/chain/cgbond" :underline="false">现状分析图</el-link></li>
			<li>全景图</li>
			<li>热力图</li>
			<li>招商地图</li>
			<li>企业库</li>
			<li>创新库</li>
			<li>投融资库</li>
			<li>招商项目库</li>
			<li>商会协会库</li>
			<li>乡贤库</li>
			<li>线索池</li>
			<li>政策池</li>
			<li>人才池</li>
			<li>服务机构池</li>
			<li>报告池</li>
		</div>
		<div class="table-admin-container layout-padding" style="margin-top: 50px; width: 100%; height: 100%">
			<el-row :gutter="20">
				<el-col :span="3">
					<el-card style="height: 100%">
						<template #header>
							<div class="card-header">
								<div class="icon"><el-image src="/src/assets/chain.png" /></div>
								<div class="title">产业链</div>
							</div>
						</template>
						<List></List>
					</el-card>
				</el-col>
				<el-col :span="15">
					<el-card style="height: 100%">
						<template #header>
							<div class="card-header">
								<div class="icon"><el-image src="/src/assets/chain.png" /></div>
								<div class="title">产业链现状分析图</div>
							</div>
						</template>
						<div style="width: 100%; height: 650px; background-color: #ffffff" ref="chartRef"></div>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card style="height: 100%">
						<template #header>
							<div class="card-header">
								<div class="icon"><el-image src="/src/assets/chain.png" /></div>
								<div class="title">企业</div>
								<div class="more"></div>
							</div>
						</template>
						<div class="content">
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="cl"></div>
								</div>
								<div class="description mf10">
									<div class="address">制造业</div>
									<div class="line">|</div>
									<div class="address">上海市-漕河泾开发区</div>
									<div class="line">|</div>
									<div class="time">3100万人民币</div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="cl"></div>
								</div>
								<div class="description mf10">
									<div class="address">制造业</div>
									<div class="line">|</div>
									<div class="address">上海市-漕河泾开发区</div>
									<div class="line">|</div>
									<div class="time">3100万人民币</div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="cl"></div>
								</div>
								<div class="description mf10">
									<div class="address">制造业</div>
									<div class="line">|</div>
									<div class="address">上海市-漕河泾开发区</div>
									<div class="line">|</div>
									<div class="time">3100万人民币</div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="cl"></div>
								</div>
								<div class="description mf10">
									<div class="address">制造业</div>
									<div class="line">|</div>
									<div class="address">上海市-漕河泾开发区</div>
									<div class="line">|</div>
									<div class="time">3100万人民币</div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="cl"></div>
								</div>
								<div class="description mf10">
									<div class="address">制造业</div>
									<div class="line">|</div>
									<div class="address">上海市-漕河泾开发区</div>
									<div class="line">|</div>
									<div class="time">3100万人民币</div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="cl"></div>
								</div>
								<div class="description mf10">
									<div class="address">制造业</div>
									<div class="line">|</div>
									<div class="address">上海市-漕河泾开发区</div>
									<div class="line">|</div>
									<div class="time">3100万人民币</div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="cl"></div>
								</div>
								<div class="description mf10">
									<div class="address">制造业</div>
									<div class="line">|</div>
									<div class="address">上海市-漕河泾开发区</div>
									<div class="line">|</div>
									<div class="time">3100万人民币</div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="cl"></div>
								</div>
								<div class="description mf10">
									<div class="address">制造业</div>
									<div class="line">|</div>
									<div class="address">上海市-漕河泾开发区</div>
									<div class="line">|</div>
									<div class="time">3100万人民币</div>
								</div>
							</li>
							<li>
								<div class="list">
									<div class="drop-new"></div>
									<div class="topic">上市公司</div>
									<div class="title">上海市化工研究院天地科技发展公司</div>
									<div class="cl"></div>
								</div>
								<div class="description mf10">
									<div class="address">制造业</div>
									<div class="line">|</div>
									<div class="address">上海市-漕河泾开发区</div>
									<div class="line">|</div>
									<div class="time">3100万人民币</div>
								</div>
							</li>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
		<!-- <div  class="table-admin-container  layout-padding"  style="width: 400px; float: left; height: 96%;  top: 50px; ">-->
	</div>
</template>

<script setup lang="ts" name="cgjudgeLists">
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getList, getListAll, del, batDel, change } from '/@/api/cgjudge/index';
import * as echarts from 'echarts';
import { handleTree } from '/@/utils';

// 引入组件
const List = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/List.vue'));
const Menu = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/Menu.vue'));
const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));
const EditDialog = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/form/edit.vue'));
// 定义变量内容
const tableRef = ref<RefType>();
const chartRef = ref();
const editRef = ref();
const state = reactive<TableDemoState>({
	tableData: {
		// 列表数据（必传）
		data: [],
		// 表头内容（必传，注意格式）
		header: [
			{ key: 'name', colWidth: '', title: '姓名', type: 'text', isCheck: true },
			{ key: 'court', colWidth: '', title: '法院', type: 'text', isCheck: true },
			{ key: 'duties', colWidth: '', title: '职务', type: 'text', isCheck: true },
			{ key: 'phone', colWidth: '', title: '联系方式', type: 'text', isCheck: true },
			{ key: 'dutyTime', colWidth: '', title: '值班时间', type: 'text', isCheck: true },
			{ key: 'dutyAddress', colWidth: '', title: '值班地点', type: 'text', isCheck: true },
		],
		// 配置项（必传）
		config: {
			total: 0, // 列表总数
			loading: true, // loading 加载
			isButton: true,
			isBorder: false, // 是否显示表格边框
			isSerialNo: false, // 是否显示表格序号
			isSelection: true, // 是否显示表格多选
			isOperate: true, // 是否显示表格操作栏
			isAdd: 'admin:cogencgjudge:save', //新增标识
			isUpdate: 'admin:cogencgjudge:save', //修改标识
			isDelete: 'admin:cogencgjudge:del', //删除标识
			isBatchEdit: '', //批量修改标识
			isView: '',
			isBatchAdd: 'admin:cogencgjudge:batchadd', //批量导入
			isBatchDel: 'admin:cogencgjudge:batchdel', //批量导入
		},
		// 搜索表单，动态生成（传空数组时，将不显示搜索，注意格式）
		search: [
			{ label: '姓名', prop: 'name', placeholder: '请输入姓名', required: false, type: 'input' },
			{ label: '法院', prop: 'court', placeholder: '请输入法院', required: false, type: 'input' },
		],
		// 搜索参数（不用传，用于分页、搜索时传给后台的值，`getTableData` 中使用）
		param: {
			page: 1,
			psize: 10,
		},
		//显示分页
		showpage: 1,
		// 打印标题
		printName: '数据打印',
		//列字典
		dictData: {},
	},
});

// 初始化列表数据
const getTableData = () => {
	state.tableData.config.loading = true;
	state.tableData.data = [];
	getList(state.tableData.param).then((response: any) => {
		state.tableData.data = response.data.data;
		state.tableData.config.total = response.data.total;
		state.tableData.config.loading = false;
	});
};

// 搜索点击时表单回调
const onSearch = (data: EmptyObjectType) => {
	state.tableData.param = Object.assign({}, state.tableData.param, { ...data });
	tableRef.value.pageReset();
};
// 删除当前项回调
const onTableDelRow = (row: EmptyObjectType) => {
	return del(row.id).then(() => {
		getTableData();
		ElMessage.success(`删除法官${row.name}成功！`);
	});
};
const onTableBatchDel = (ids: string) => {
	return batDel(ids).then(() => {
		getTableData();
		ElMessage.success(`批量删除成功！`);
	});
	console.log(ids);
};
// 分页改变时回调
const onTablePageChange = (page: TableDemoPageType) => {
	state.tableData.param.page = page.page;
	state.tableData.param.psize = page.psize;
	getTableData();
};
// 拖动显示列排序回调
const onSortHeader = (data: TableHeaderType[]) => {
	state.tableData.header = data;
};

/** 新增按钮操作 */
const onTableAddRow = () => {
	editRef.value.openDialog('add');
};
/** 修改按钮操作 */
const onTableUpdateRow = (row: any) => {
	editRef.value.openDialog('edit', row);
};

// 页面加载时
onMounted(() => {
	const chart = echarts.init(chartRef.value);
	const option = {
		backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
			{
				offset: 0,
				//color: '#f7f8fa'
				color: '#fff',
			},
			{
				offset: 0,
				color: '#fff',
			},
		]),
		title: {
			text: '人工智能产业链图谱',
			show: true,
			top: 'top',
			left: 'center',
		},
		tooltip: {},
		toolbox: {
			show: true,
		},
		animationDuration: 3000,
		animationEasingUpdate: 'quinticInOut',
		series: [
			{
				name: '人工智能',
				type: 'graph',
				layout: 'force',
				force: {
					repulsion: 120,
				},
				data: [
					{
						name: '人工智能',
						// "x": 0,
						// y: 0,
						symbolSize: 30,
						draggable: 'true',
						value: 27,
					},
					{
						name: '上游',
						value: 3,
						symbolSize: 10,
						category: '上游',
						draggable: 'true',
					},
					{
						name: 'AI芯片',
						symbolSize: 3,
						category: '上游',
						draggable: 'true',
						value: 1,
					},
					{
						name: '传感器/中间件',
						symbolSize: 3,
						category: '上游',
						draggable: 'true',
						value: 1,
					},
					{
						name: '数据库',
						symbolSize: 3,
						category: '上游',
						draggable: 'true',
						value: 1,
					},
					{
						name: '技术层',
						value: 6,
						symbolSize: 20,
						category: '技术层',
						draggable: 'true',
					},
					{
						name: '深度学习',
						symbolSize: 3,
						category: '技术层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '计算机视觉',
						symbolSize: 3,
						category: '技术层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '自然语言处理',
						symbolSize: 3,
						category: '技术层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '通用应用层',
						value: 13,
						symbolSize: 20,
						category: '通用应用层',
						draggable: 'true',
					},
					{
						name: '语音识别',
						symbolSize: 3,
						category: '通用应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '图像识别',
						symbolSize: 3,
						category: '通用应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '语义识别',
						symbolSize: 3,
						category: '通用应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '人脸识别',
						symbolSize: 3,
						category: '通用应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '视频识别',
						symbolSize: 3,
						category: '通用应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '身份识别',
						symbolSize: 3,
						category: '通用应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '声纹识别',
						symbolSize: 3,
						category: '通用应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '文字识别',
						symbolSize: 3,
						category: '通用应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '手势识别',
						symbolSize: 3,
						category: '通用应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '指纹识别',
						symbolSize: 3,
						category: '通用应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '静脉识别',
						symbolSize: 3,
						category: '通用应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '虹膜识别',
						symbolSize: 3,
						category: '通用应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '掌纹识别',
						symbolSize: 3,
						category: '通用应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '行业应用层',
						value: 6,
						symbolSize: 20,
						category: '行业应用层',
						draggable: 'true',
					},
					{
						name: 'AI医疗',
						symbolSize: 3,
						category: '行业应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '自动驾驶',
						symbolSize: 3,
						category: '行业应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: 'AI安防',
						symbolSize: 3,
						category: '行业应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '智能投顾',
						symbolSize: 3,
						category: '行业应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '聊天机器人',
						symbolSize: 3,
						category: '行业应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: 'AI教育',
						symbolSize: 3,
						category: '行业应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '智能家居',
						symbolSize: 3,
						category: '行业应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: 'AI金融',
						symbolSize: 3,
						category: '行业应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '安防监控系统',
						symbolSize: 3,
						category: '行业应用层',
						draggable: 'true',
						value: 1,
					},
					{
						name: '安防机器人',
						symbolSize: 3,
						category: '行业应用层',
						draggable: 'true',
						value: 1,
					},
				],
				links: [
					{
						source: '人工智能',
						target: '上游',
					},
					{
						source: '上游',
						target: 'AI芯片',
					},
					{
						source: '上游',
						target: '软件工程',
					},
					{
						source: '上游',
						target: '传感器/中间件',
					},
					{
						source: '上游',
						target: '数据库',
					},
					{
						source: '人工智能',
						target: '技术层',
					},
					{
						source: '技术层',
						target: '深度学习',
					},
					{
						source: '技术层',
						target: '计算机视觉',
					},
					{
						source: '技术层',
						target: '自然语言处理',
					},
					{
						source: '人工智能',
						target: '通用应用层',
					},
					{
						source: '通用应用层',
						target: '语音识别',
					},
					{
						source: '通用应用层',
						target: '图像识别',
					},
					{
						source: '通用应用层',
						target: '语义识别',
					},
					{
						source: '通用应用层',
						target: '人脸识别',
					},
					{
						source: '通用应用层',
						target: '视频识别',
					},
					{
						source: '通用应用层',
						target: '身份识别',
					},
					{
						source: '通用应用层',
						target: '声纹识别',
					},
					{
						source: '通用应用层',
						target: '文字识别',
					},
					{
						source: '通用应用层',
						target: '手势识别',
					},
					{
						source: '通用应用层',
						target: '指纹识别',
					},
					{
						source: '通用应用层',
						target: '静脉识别',
					},
					{
						source: '通用应用层',
						target: '虹膜识别',
					},
					{
						source: '人工智能',
						target: '行业应用层',
					},
					{
						source: '通用应用层',
						target: '掌纹识别',
					},
					{
						source: '行业应用层',
						target: 'AI医疗',
					},
					{
						source: '行业应用层',
						target: '自动驾驶',
					},
					{
						source: '行业应用层',
						target: 'AI安防',
					},
					{
						source: '行业应用层',
						target: '智能投顾',
					},
					{
						source: '行业应用层',
						target: '聊天机器人',
					},
					{
						source: '行业应用层',
						target: 'AI教育',
					},
					{
						source: '行业应用层',
						target: '智能家居',
					},
					{
						source: '行业应用层',
						target: 'AI金融',
					},
					{
						source: '行业应用层',
						target: '安防监控系统',
					},
					{
						source: '行业应用层',
						target: '安防机器人',
					},
				],
				categories: [
					{
						name: '上游',
					},
					{
						name: '技术层',
					},
					{
						name: '通用应用层',
					},
					{
						name: '行业应用层',
					},
				],
				focusNodeAdjacency: true,
				roam: true,
				label: {
					normal: {
						show: true,
						position: 'top',
					},
				},
				lineStyle: {
					normal: {
						color: 'source',
						curveness: 0,
						type: 'solid',
					},
				},
			},
		],
	};

	chart.setOption(option);
	getTableData();
	// 关联查询
});
</script>

<style scoped lang="scss">
.card-header {
	height: 35px;
	.icon {
		float: left;
		margin-right: 15px;
	}
	.title {
		font-size: 22px;
		color: #010101;
		float: left;
	}
	.remind {
		height: 16px;
		background: #ff0000;
		border-radius: 6px 6px 6px 0px;
		float: left;
		color: #ffff;
		margin-left: 10px;
		text-align: center;
		padding: 0px 5px;
		font-size: 12px;
	}
	.more {
		background-image: url('/src/assets/more.png');
		width: 16px;
		height: 14px;
		float: right;
		margin-top: 10px;
		background-size: 100% 100%;
	}
}
.menu {
	width: 100%;
	height: 50px;
	background-color: #ffffff;
	li {
		list-style: none;
		float: left;
		width: 6.1%;
		font-size: 16px;
		line-height: 50px;
		text-align: center;
	}
}
.table-admin-container {
	.table-admin-padding {
		padding: 15px;
		.table-admin {
			flex: 1;
			overflow: hidden;
		}
	}
}
.content {
	min-height: 235px;
	li:hover {
		background-color: rgba(24, 144, 255, 0.1);
	}
	li {
		list-style: none;
		height: auto;
		line-height: 30px;
		padding: 10px 0px 10px 20px;
		.list {
			height: 30px;
			.drop-new {
				background-color: #efa151;
				float: left;
				width: 8px;
				height: 8px;
				border-radius: 3px;
				margin-top: 11px;
			}
			.topic {
				height: 22px;
				background: linear-gradient(140deg, #ff3334, #fe7527);
				border-radius: 0px 6px 0px 6px;
				float: left;
				color: #fff;
				text-align: center;
				line-height: 22px;
				font-size: 14px;
				margin-left: 15px;
				padding: 0 8px;
				margin-top: 4px;
			}
			.title {
				height: 17px;
				font-weight: 400;
				font-size: 16px;
				color: #000000;
				float: left;
				margin-left: 10px;
			}
			.time {
				color: #999999;
			}
		}
		.description {
			height: 20px;
			color: #999999;
			margin-left: 10px;
			.address {
				float: left;
				margin-left: 10px;
			}
			.line {
				float: left;
				margin-left: 10px;
			}
			.time {
				float: left;
				margin-left: 10px;
			}
		}
	}
}
</style>
